<div class="demo-toolbar">
  <p>
    <mat-toolbar>
      <button mat-icon-button>
        <mat-icon>menu</mat-icon>
      </button>

      <span>Default Toolbar</span>
      <span class="demo-fill-remaining"></span>

      <button mat-button>Text</button>
      <button mat-icon-button>
        <mat-icon>code</mat-icon>
      </button>

      <button mat-icon-button color="warn">
        <mat-icon>code</mat-icon>
      </button>
    </mat-toolbar>
  </p>

  <p>
    <mat-toolbar color="primary">
      <button mat-icon-button>
        <mat-icon>menu</mat-icon>
      </button>

      <span>Primary Toolbar</span>
      <span class="demo-fill-remaining"></span>

      <button mat-raised-button>Text</button>
      <button mat-raised-button color="accent">Accent</button>
      <button mat-stroked-button>Stroked</button>
    </mat-toolbar>
  </p>

  <p>
    <mat-toolbar color="accent">
      <button mat-icon-button>
        <mat-icon>menu</mat-icon>
      </button>

      <span>Accent Toolbar</span>
      <span class="demo-fill-remaining"></span>

      <button mat-button>Text</button>
      <button mat-flat-button>Flat</button>
      <button mat-mini-fab color="">
        <mat-icon>done</mat-icon>
      </button>
      <button mat-mini-fab color="primary">
        <mat-icon>done</mat-icon>
      </button>
    </mat-toolbar>
  </p>

  <p>
    <mat-toolbar>
      <mat-toolbar-row>First Row</mat-toolbar-row>
      <mat-toolbar-row>Second Row</mat-toolbar-row>
    </mat-toolbar>
  </p>

  <p>
    <mat-toolbar color="primary">
      <mat-toolbar-row>
        <span>First Row</span>
      </mat-toolbar-row>

      <mat-toolbar-row>
        <span>Second Row</span>

        <span class="demo-fill-remaining"></span>

        <mat-icon class="demo-toolbar-icon">verified_user</mat-icon>
      </mat-toolbar-row>

      <mat-toolbar-row>
        <span>Third Row</span>

        <span class="demo-fill-remaining"></span>

        <mat-icon class="demo-toolbar-icon">favorite</mat-icon>
        <mat-icon class="demo-toolbar-icon">delete</mat-icon>
      </mat-toolbar-row>
    </mat-toolbar>
  </p>

  <h3>Toolbar with form-fields</h3>

  <p>
    <mat-toolbar>
      <mat-form-field>
        <mat-label>Select</mat-label>
        <mat-select>
          <mat-option value="1">One</mat-option>
          <mat-option value="2">Two</mat-option>
        </mat-select>
      </mat-form-field>

      <mat-form-field appearance="legacy">
        <mat-label>Input</mat-label>
        <input matInput>
      </mat-form-field>
    </mat-toolbar>
  </p>

  <p>
    <mat-toolbar color="primary">
      <mat-form-field>
        <mat-label>Select</mat-label>
        <mat-select>
          <mat-option value="1">One</mat-option>
          <mat-option value="2">Two</mat-option>
        </mat-select>
      </mat-form-field>

      <mat-form-field appearance="legacy">
        <mat-label>Input</mat-label>
        <input matInput>
      </mat-form-field>
    </mat-toolbar>
  </p>
</div>
